<link rel="stylesheet" th:href="@{static/admin/treegrid/jquery.treegrid.css}">
<link rel="stylesheet" th:href="@{static/admin/fonts/fontawesome/css/all.min.css}">
<link rel="stylesheet" th:href="@{static/admin/layui/css/layui.css}" />
<link rel="stylesheet" th:href="@{static/admin/css/admin.css}" />
<!-- Main content -->

<div class="wrap-container clearfix">
    <div class="column-content-detail">
        <form class="layui-form" action="">
            <div class="layui-form-item">
                <div class="layui-inline tool-btn">
                    <button class="layui-btn layui-btn-small layui-btn-normal addBtn"  data-url="JumpAddOrUpdateMenu"><i class="layui-icon">&#xe654;</i></button>
                    <button class="layui-btn layui-btn-small layui-btn-danger delBtn"  data-url="/addMenu"><i class="layui-icon">&#xe640;</i></button>
                </div>
            </div>
        </form>
        <div  id="table-list" class="layui-table-main">
            <table id="menuTable" class="layui-table mt-2" lay-even lay-skin="nob" data-mobile-responsive="true" data-click-to-select="true"></table>
        </div>
    </div>
</div>

<!-- 表单模态框 -->
<div class="modal fade" id="formModal" tabindex="-1" role="dialog">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="formTitle"></h5>
                <button type="button" class="close" data-dismiss="modal">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <div id="formContent"></div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
                <button type="button" class="btn btn-primary" id="saveOrUpdateBtn" onclick="saveOrUpdate()">保存
                </button>
            </div>
        </div>
    </div>
</div>

<div id="permissionLayer" style="display: none;padding: 20px;">
    <ul id="permissionTree" class="ztree"></ul>
</div>

<script th:src="@{static/admin/jquery/jquery.min.js}"></script>
<script th:src="@{static/admin/js/core.js}"></script>
<script th:src="@{static/admin/treegrid/jquery.treegrid.min.js}"></script>
<script th:src="@{static/admin/treegrid/jquery.treegrid.extension.js}"></script>
<script th:src="@{static/admin/treegrid/tree.table.js}"></script>
<script th:src="@{static/admin/layui/layui.js}" type="text/javascript" charset="utf-8"></script>
<script th:src="@{static/admin/js/common.js}" type="text/javascript" charset="utf-8"></script>
<script>



    var menuType = "1";/*默认选中菜单类型*/
    var menuCheckedType = 0;/*选中的上级的菜单类型*/
    var detailMenuCheckedType;/*详情中选中的上级的菜单类型*/

    var treeTableConf = {
        id: "menuTable",
        table: null,
        columns: [
            {
                field: 'selectItem',
                radio: true
            },
            {
                title: '菜单名称',
                field: 'title',
                align: 'center',
            },
            {
                title: '菜单URL',
                field: 'url',
                align: 'center',
            },
            {
                title: '权限标识',
                field: 'perms',
                align: 'center',
            },
            {
                title: '类型',
                field: 'type',
                align: 'center',
                width: '60px',
                formatter: function (row, index) {
                    switch (row.type) {
                        case 0 :
                            return '<span class="layui-btn layui-btn-xs ">目录</span>';
                        case 1 :
                            return '<span class="layui-btn layui-btn-xs layui-btn-warm">菜单</span>';
                        case 2 :
                            return '<span class="layui-btn layui-btn-xs layui-btn-warm">按钮</span>';
                    }
                }
            },
            {
                title: '图标',
                field: 'icon',
                align: 'center',
                width: '60px',
                formatter: function (row, index) {
                    if (row.type !== 2) {
                        return '<i class="' + row.icon + ' fa-lg"></i>';
                    } else {
                        return "";
                    }
                }
            },
            {
                title: '排序',
                field: 'orderNum',
                align: 'center',
                width: '60px'
            },
            {
                title: '权限描述',
                field: 'description',
                align: 'center',
            },
            {
                field: 'operation',
                title: '操作',
                align: "center",
                width: '150px',
                formatter: function (row, index) {
                    var edit ='<button class="layui-btn layui-btn-small layui-btn-normal edit-btn"  data-id=' + row.id + ' data-url="JumpAddOrUpdateMenu"><i class="layui-icon">&#xe642;</i></button>';
                    var del = '<button class="layui-btn layui-btn-small layui-btn-danger del-btn" data-id=' + row.id + ' data-url="deleteMenu"><i class="layui-icon">&#xe640;</i></button>';
                    return edit + del;
                }
            }
        ]
    }

    $(function () {
        var table = new TreeTable(treeTableConf.id, "/getMenuListData", treeTableConf.columns, "permissionId");
        table.setExpandColumn(1);
        table.setIdField("permissionId");
        table.setCodeField("id");
        table.setParentCodeField("parentId");
        /*table.setExpandAll(true);*/
        table.setStriped(false);
        table.init();
        treeTableConf.table = table;
    })




    function saveOrUpdate() {
        var $f = $('#permissionForm');
        var valid = $f[0].checkValidity();
        var url = $f.find("input[title='permissionId']").val() ? "/permission/edit" : "/permission/add"
        if (valid) {
            if (detailMenuCheckedType != null) {
                var detailMenuType = $f.find("input[name='type']:checked").val();
                console.log(detailMenuType)
                console.log(detailMenuCheckedType)
                if ((detailMenuType === "0" || detailMenuType === "1") && detailMenuCheckedType !== 0) {
                    layer.msg("上级资源只能是目录类型！")
                    return;
                } else if (detailMenuType === "2" && detailMenuCheckedType !== 1) {
                    layer.msg("上级资源只能是菜单类型！")
                    return;
                }
            }
            Core.mask("#saveOrUpdateBtn");
            Core.postAjax(url, $f.serialize(), function (data) {
                Core.unmask("#saveOrUpdateBtn");
                if (data.status === 200) {
                    $("#formModal").modal("hide");
                    treeTableConf.table.refresh();
                }
                layer.msg(data.msg);
            }, function () {
                Core.unmask("#saveOrUpdateBtn");
            })
        }
        $f.addClass("was-validated")
    }


</script>